layui.use(['table','layer','jquery'], function() {
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.$;
    //第一个实例,数据表格渲染
    table.render({
        elem: "#user",
        url: "../user?method=init",
        //显示所有列的信息,
        //当启用page时，系统会带入page,limit两个参数
        page: true,
        //配置工具栏
        toolbar: "default",
        //设置每页显示条数
        limit: 5,
        //设置每页的显示条数选择列表
        limits: [1, 3, 5, 10, 20],
        cols: [[
            {field: "uid", type: "checkbox", title: "编号", width: "5%", align: "center", sort: true},
            {field: "uname", title: "姓名", width: "10%", align: "center"},
            {field: "upwd", title: "密码", width: "10%", align: "center"},
            {field: "unumber", title: "电话号码", width: "10%", align: "center"},
            {field: "state", title: "账户状态", width: "10%", align: "center"},
            {field:"op",title:"操作",width:"15%",align:"center",templet:"#btn"}
        ]]
    });

    //监听工具条，实现查看，编辑，删除
    table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if(layEvent === 'detail'){ //查看
            //显示弹出层
            layer.open({
                type: 2,
                shade: true,//显示遮罩效果，弹出层未关闭之前，无法执行其他操作
                area: ['460px','300px'],
                maxmin: false,//最小化与最大化
                title:"查看详情",
                content: 'detail.jsp',
                zIndex: layer.zIndex, //重点1
                success: function(layero){
                    layer.setTop(layero); //重点2
                    //获得弹出的页面中的body部分
                    var body = layui.layer.getChildFrame("body");
                    //给body中的控件赋值(数据回显)
                    body.find("[name='name']").val(data.uname);
                    body.find("[name='pwd']").val(data.upwd);
                    body.find("[name='number']").val(data.unumber);
                    body.find("[name='state']").val(data.state);
                }
            });
        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                //向服务端发送删除指令
                $.post("user",{"method":"del","id":data.uid},function () {
                    //后台数据删除成功后
                    //删除界面上的某一行，假删除
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                });
            });
        } else if(layEvent === 'edit'){ //修改
            //显示弹出层
            layer.open({
                type: 2,
                shade: true,//显示遮罩效果，弹出层未关闭之前，无法执行其他操作
                area: ['460px','400px'],
                maxmin: false,//最小化与最大化
                title:"修改信息",
                content: 'update.jsp',
                zIndex: layer.zIndex, //重点1
                success: function(layero){
                    layer.setTop(layero); //重点2
                    //获得弹出的页面中的body部分
                    var body = layui.layer.getChildFrame("body");
                    //给body中的控件赋值(数据回显)
                    body.find("[name='id']").val(data.uid);
                    body.find("[name='name']").val(data.uname);
                    body.find("[name='pwd']").val(data.upwd);
                    body.find("[name='number']").val(data.unumber);
                    body.find("[name='state']").val(data.state);
                }
            });
        }
    });

    //监听数据表头部的工具栏
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data; //获得选中的所有的行(返回是一个数组)
        switch(obj.event){
            case 'add':
                //添加，弹出添加数据页面
                //显示弹出层
                layer.open({
                    type: 2,
                    shade: true,//显示遮罩效果，弹出层未关闭之前，无法执行其他操作
                    area: ['460px','400px'],
                    maxmin: false,//最小化与最大化
                    title:"添加信息",
                    content: 'add.jsp',
                    zIndex: layer.zIndex, //重点1
                    success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
                break;
            case 'delete':
                //批量删除

                //判断是否有数据被选中
                if (data.length==0){
                    layer.msg("请选择要删除的数据!",{
                        title:"错误!",
                        icon:2
                    });
                } else {
                    //创建数组用于封装要批量删除的id
                    var arrs = new Array();
                    //对所有选中的数组遍历，将每一行(就是一个info对象)的id取出来，存放到数组中
                    $.each(data,function (index,r) {
                        //将要删除的id存入数组
                        arrs.push(r.id);
                    });
                    //将数组转换成字符串格式的字符串
                    var ids = JSON.stringify(arrs);

                    //发送ajax请求，删除请求，并且将ids传递到后台
                    $.post("ajax",{"method":"dels","ids":ids},function () {
                        //重新加载数据
                        table.reload('demo',{
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    });
                }
                break;
            case 'update':
                layer.msg("update...");
                break;
        };
    });

});